<template>
  <div>
    <h4>「拖动可调整字段在列表中展示顺序」『 点击切换展示/隐藏列』</h4>
    <vueDraggable style="text-align: left" v-model="dyColumns" group="“column”" @start="onStart" @end="onEnd">
      <el-tag
        v-for="item in dyColumns"
        style="margin: 0 20px 20px 0; cursor: pointer"
        size="medium"
        :key="item.prop"
        @click="selTag(item)"
        :effect="item.show ? 'dark' : 'plain'"
      >
        {{ item.label }}
      </el-tag>
    </vueDraggable>
    <div class="opt-btn" style="text-align: right; margin-top: 20px">
      <el-button @click="cancel">取消</el-button>
      <el-button @click="confirm" type="primary">确定</el-button>
    </div>
  </div>
</template>

<script>
//需要一个获取所有列的接口，一个更新列的接口
import vueDraggable from "vuedraggable";
export default {
  name: "",
  props: {
    columns: Array,
  },
  components: { vueDraggable },
  data() {
    return {
      dyColumns: [],
    };
  },
  mounted() {},
  methods: {
    onStart() {},
    onEnd() {
      // console.log("[ this.columns ] >", this.columns);
    },
    selTag(item) {
      item.show = item.show == 1 ? 0 : 1;
    },
    cancel() {
      this.$emit("cancel");
    },
    confirm() {
      this.$emit("confirm", this.dyColumns);
    },
  },
  watch: {
    columns: {
      deep: true,
      immediate: true,
      handler(newVal) {
        this.dyColumns = newVal;
      },
    },
  },
};
</script>
<style scoped lang="scss"></style>
